<template>
	<div class="table-comp-root">
		<el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%" :height="tableHeight"
			highlight-current-row @current-change="handleTableCurrentChange" :header-cell-style="{
				color: 'rgba(0, 0, 0, 0.85)',
				fontSize: '14px',
				textAlign: 'left',
				backgroundColor: '#F8F8F8',
				fontWeight: 600,
			}" :row-style="{
				backgroundColor: '#FFFFFF',
			}" v-loading="loading" element-loading-spinner="el-icon-loading" element-loading-background="#f8f8f8"
			:element-loading-text="$t('message.bhView.loading')">
			<el-table-column prop="acc" :label="$t('message.userPageTable.userId')">
				<!-- <template slot-scope="scope">{{ scope.row.acc }}</template> -->
			</el-table-column>
			<el-table-column prop="name" :label="$t('message.userPageTable.uname')"></el-table-column>
			<el-table-column :label="$t('message.userPageTable.userType')">

				<template slot-scope="scope">
					<span v-if="scope.row.accType == 1">{{
						$t("message.userPageTable.admin")
					}}</span>
					<span v-if="scope.row.accType == 2">{{
						$t("message.userPageTable.ordinaryUsers")
					}}</span>
				</template>
			</el-table-column>
			<!-- <el-table-column prop="showOrdr" :label="$t('message.userPageTable.showOrdr')">
				<template slot-scope="scope">
					<span>{{ scope.$index + 1 }}</span>
				</template>
			</el-table-column> -->
			<el-table-column prop="name" :label="$t('message.userPageTable.action')">

				<template slot-scope="scope">
					<div class="table-msg-view">
						<!-- <span @click="editUser(scope.row)">{{
										$t("message.public.edit")
									}}</span>
									<span class="solid"></span> -->
						<!-- <span v-if="(accType == 1 && userID != scope.row.userId) ||
							accType == 3 || userArrId.indexOf(scope.row.userId) == -1
						" @click="deleteUser(scope.row)">{{ $t("message.public.delete") }}-{{ scope.row.userId }}-</span> -->
						<span v-if="userID != scope.row.userId" @click="deleteUser(scope.row)">{{
							$t("message.public.delete") }}</span>

						<span v-else style="color: gray">{{
							$t("message.public.delete")
						}}</span>
					</div>
				</template>
			</el-table-column>
		</el-table>

		<!-- <div class="bottom-lay">
			<el-pagination
				@size-change="handlePageSizeChange"
				@current-change="handlePageCurrentChange"
				:current-page.sync="tableForm.pageIndex"
				:page-size="tableForm.pageSize"
				:page-sizes="[10, 20, 30]"
				layout=" prev, pager, next"
				:total="total"
				background
			></el-pagination>
		</div> -->
	</div>
</template>

<script>
import { getLocalStorage } from "@/utils/storage";
import { getUser, delUser, addUser } from "@/api/api";
import { showLoading, hideLoading } from "@/utils/loading";
import eventBus from "@/eventBus/bus";
import $ from "jquery";
export default {
	data() {
		return {
			// 用户表格
			tableData: [],
			total: 0,
			tableForm: {
				pageIndex: 1,
				pageSize: 6000,
				acc: "",
				name: "",
			},
			loading: false,
			tableHeight: 450,
			accType: getLocalStorage("accType"),
			userID: getLocalStorage("userID"),
			userArrId: getLocalStorage("userArrId"),
			singleSelectData: null,

			showDelDialog: true,
			cacheDelRow: null,
			delTipIcon: require("@/assets/img/icon_del@2x.png"),
		};
	},

	methods: {
		getUserApi(selectIndex = 0, acc = "") {
			this.tableForm.acc = acc;
			this.loading = true;
			getUser(this.tableForm).then((res) => {
				console.log(res, "userData")
				this.tableData = [];
				this.total = 0;
				if (res.data.code != 0) {
					this.loading = false;

					return;
				}
				this.tableData = res.data.data;
				this.total = res.data.count;
				if (selectIndex >= 0) {
					this.$refs.multipleTable.setCurrentRow(this.tableData[selectIndex]);
				} else {
					// this.$refs.multipleTable.setCurrentRow(this.singleSelectData);
					let temp = this.tableData.findIndex(e => {
						return e.userId == this.singleSelectData.userId
					})
					temp = temp == -1 ? 0 : temp;
					this.$refs.multipleTable.setCurrentRow(this.tableData[temp]);
				}
				this.loading = false;

			});
		},

		/**
		 * 单选点击
		 */
		handleTableCurrentChange(val) {
			this.singleSelectData = val;
			this.$emit("onUserSelect", val);
		},

		handlePageSizeChange(val) {
			this.tableForm.pageSize = val;
			this.getUserApi();
		},

		handlePageCurrentChange(val) {
			this.tableForm.pageIndex = val;
			this.getUserApi();
		},

		deleteUser(row) {
			let data = {
				id: [row.userId],
				UserID: getLocalStorage("userID"),
			};
			this.$confirm(
				this.$t("message.userPageTable.userTips"),
				this.$t("message.public.delete"),
				{
					confirmButtonText: this.$t("message.public.confirm"),
					cancelButtonText: this.$t("message.public.cancel"),
					type: "warning",
				}
			)
				.then(() => {
					delUser(data).then((res) => {
						let totalPage = Math.ceil(
							(this.total - 1) / this.tableForm.pageSize
						);
						let currentPage =
							this.tableForm.pageIndex > totalPage
								? totalPage
								: this.tableForm.pageIndex;
						this.tableForm.pageIndex =
							this.tableForm.pageIndex < 1 ? 1 : currentPage;
						this.getUserApi();
					});
				})
				.catch(() => { });
		},

		afterCreateUser() {
			this.tableForm.pageIndex = 1;
			this.getUserApi();
		},

		afterEditUser() {
			this.tableForm.pageIndex = 1;
			this.getUserApi(-1);
		},

		afterSort() {
			this.getUserApi(-1);
		},

		getPreItemUserId() {
			let curIndex = this.tableData.findIndex(e => {
				return this.singleSelectData.userId == e.userId;
			})
			let teget = curIndex > 0 ? curIndex - 1 : curIndex;
			return this.tableData[teget].userId;
		},

		getNextItemUserId() {
			let curIndex = this.tableData.findIndex(e => {
				return this.singleSelectData.userId == e.userId;
			})

			let teget = curIndex < this.tableData.length - 1 ? curIndex + 1 : curIndex;
			return this.tableData[teget].userId;
		}
	},

	created() {
		this.getUserApi();

		eventBus.$on('refreshTable', () => {
			this.getUserApi();
		})

		let that = this;
		this.$nextTick(function () {
			let heightStyle = $(".table-comp-root").height() - 0;
			that.tableHeight = heightStyle;
		});
	},
	beforeDestroy() {
		eventBus.$off("refreshTable")
	},

};
</script>

<style lang="scss" scoped>
.table-comp-root {
	width: 100%;
	height: 100%;

	::v-deep .current-row>td {
		background-color: rgba(2, 150, 255, 0.07) !important;
	}
}

.table-msg-view {
	display: flex;
	justify-content: flex-start;
	align-items: center;
	color: rgba(234, 43, 58, 1);
	font-size: 14px;

	span {
		cursor: pointer;
	}

	.solid {
		width: 1px;
		height: 14px;
		margin: 0 8px;
		cursor: none;
		background: rgba(233, 233, 233, 1);
	}
}

.bottom-lay {
	width: 100%;
	height: 40px;
	background-color: #edeeef;

	display: flex;
	flex-direction: row;
	justify-content: flex-end;
	align-items: center;
}
</style>